<template>
	<view class="container" :style="{'padding-top': phoneHieght}">
		<u-navbar :fixed="true" leftIconSize="0" title="我的" bgColor="rgba(0,0,0,0)"></u-navbar>
		<scroll-view enableFlex scroll-y class="body">
			<view class="user-info main-start-flex">
				<view v-if="isUserLogin && userInfo" class="head-img">
					<u-avatar v-if="userInfo.avatar" size="98rpx" :src="userInfo.avatar" @click="upAvatarClick">
					</u-avatar>
					<view class="user-info-text" @click="goPernsonCenter">
						<view v-if="userInfo.nickname!=null&&userInfo.nickname!=undefined">
							<text>{{userInfo.nickname}}</text>
						</view>
						<view class="grow-class">
							成长值 {{userLevelInfo.user_experience || 0}} >
						</view>
					</view>
				</view>
				<view v-else class="login main-center-flex" @click="goLogin">
					立即登录
				</view>
			</view>
			<view class="account-price-container main-space-between" v-if="isUserLogin && userInfo">
				<view class="account-price-item my-banlance" @click="lookBanlance"
					:style="{'font-size':userInfo.integral>10000000000 ?'42rpx': '52rpx' }">
					<view class="balance-text">{{userInfo.balance}}</view>
					<view class="desc-text">账户余额(元)</view>
				</view>
				<view class="account-price-item my-banlance"
					:style="{'font-size':userInfo.integral>10000000000 ?'42rpx': '52rpx' }">
					<view class="balance-text">{{userInfo.integral}}</view>
					<view class="desc-text">中古币</view>
				</view>
			</view>
			<view v-if="isOpenLevel" class="level-container">
				<view class="content-class" :style='{"background-image": "url(" + CenterImage.back + ")"}'>
					<view class="left-area">
						<view class="v_text">{{ level }}</view>
						<view class="v_desc">{{ levelDesc }}</view>
					</view>
					<view class="right-area" @click="goPernsonCenter">
						会员详情 >
					</view>
				</view>
			</view>
			<!-- 免单券+道具卡 -->
			<view class="prop-container" :style="{
					'margin-top': isOpenLevel ? '-58px' : '15px',
					'background-image': 'url('+CenterImage.back+')'
				}">
				<!-- :style="{'background-image': 'url('+CenterImage.free+')'}" -->
				<view class="prop-center" :style="{'background-image': 'url('+CenterImage.free+')'}" @click="jumpPage(1)">
					<view class="text-center">免单券</view>
					<view class="num-center">{{ chanceNum }}</view>
				</view>
				<view class="prop-center" :style="{'background-image': 'url('+CenterImage.prop+')'}" @click="jumpPage(2)">
					<view class="text-center">道具卡</view>
					<view class="num-center">{{ propNum }}</view>
				</view>
			</view>
			<view class="order-container">
				<view class="order-head main-start-flex my-order">
					我的订单
				</view>
				<view class="order-detail">
					<view class="order-item column-center-flex" v-for="(item,index) in orderList" :key="index"
						@tap="goOrderDetail(item.val)">
						<view class="order-item-image">
							<image :src="item.pic" mode="" class="order-icon"></image>
						</view>
						<view class="order-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="service-container">
				<view class="service-head main-start-flex">
					我的服务
				</view>
				<view class="service-detail main-start-flex">
					<view class="service-item  my-service" v-for="(item,index) in serviceList" :key="index"
						@click="goDetail(item.url)">
						<view class="service-item-image">
							<u--image :showLoading="true" :src="item.pic" width="48rpx" height="48rpx">
							</u--image>
						</view>
						<view class="service-name">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<modal ref="modal"></modal>
		
		<!-- 领取权益 -->
		<!-- <movable-area>
			<movable-view x="550rpx" y="1050rpx" direction="all">
				<image :src="claimBenefits" mode="aspectFill" @click="goClaimBenefit"></image>
			</movable-view>
		</movable-area> -->
	</view>
</template>

<script>
	import {mapGetters, mapState} from 'vuex';
	import {get_user_info} from '@/api/my.js'
	import baseUrl from '@/utils/siteInfo';
	import { getUserLevel, getLevelStatus, getMyEquity } from '@/api/user.js';
	import { CenterImage } from '@/utils/objectValue';

	export default {
		data() {
			return {
				claimBenefits: baseUrl.imgroot + '/static/images/center/claim-benefits.png',
				refreshPage: false,
				userInfo: null,
				isUserLogin: false,
				orderList: [{
						pic: require('../../static/image/my/un_pay.png'),
						name: '待付款',
						val: '1'
					},
					{
						pic: require('../../static/image/my/finish.png'),
						name: '待发货',
						val: '2'
					},
					{
						pic: require('../../static/image/my/un_receive.png'),
						name: '待收货',
						val: '3'
					},
				],
				serviceList: [
					{
						pic: baseUrl.imgroot + '/static/images/center/youhuiquan.png',
						name: '优惠券',
						url: '/plugins/coupon/index',
						iconfont: 'iconfont icon-youhuiquan'
					},
					{
						pic: baseUrl.imgroot + '/static/images/center/jilu.png',
						name: '开盒记录',
						url: '/plugins/open-record/index',
						iconfont: 'iconfont icon-jilu'
					},
					{
						pic: baseUrl.imgroot + '/static/images/center/dizhi1.png',
						name: '地址管理',
						url: '/plugins/address/index',
						iconfont: 'iconfont icon-dizhi1'
					},
					{
						pic: baseUrl.imgroot + '/static/images/center/kefu.png',
						name: '联系客服',
						url: '/plugins/customer/index',
						iconfont: 'iconfont icon-shezhi'
					},
					{
						pic: baseUrl.imgroot + '/static/images/center/shezhi.png',
						name: '设置',
						url: '/plugins/setting/index',
						iconfont: 'iconfont icon-shezhi'
					},
					{
						pic: baseUrl.imgroot + '/static/images/center/chongzhi-xianxing2-0.png',
						name: '余额充值订单',
						url: '/plugins/recharge-balance/index',
						iconfont: 'iconfont icon-chongzhi-xianxing2-0'
					},
					{
						pic: baseUrl.imgroot + '/static/images/center/liwu-copy.png',
						name: '邀请有奖',
						url: '/plugins/invitations-prized/index',
						iconfont: 'iconfont icon-liwu-copy'
					},
					{
						pic: baseUrl.imgroot + '/static/images/center/conflate.png',
						name: '合成',
						url: '/plugins/conflate/index',
						iconfont: 'iconfont icon-conflate'
					},
					// {
					// 	pic: baseUrl.imgroot + '/static/images/center/vip-cards.png',
					// 	name: '会员卡',
					// 	url: '/plugins/member-benefits/index/index',
					// 	iconfont: 'iconfont icon-member-benefits'
					// },
				],
				curLevel: 0, // 先0
				isOpenLevel: false,
				userLevelInfo: {},
				equity: {},
				showEditName: false,
				CenterImage,
				baseUrl
			}
		},
		computed: {
			...mapGetters('phone', {
				topHeight: 'topHeight',
				phoneHieght: 'phoneHieght'
			}),
			level() {
				const {level = ''} = this.userLevelInfo;
				return 'V' + level;
			},
			levelDesc() {
				const {is_lock = false, level_experience = ''} = this.userLevelInfo;
				return is_lock ? '已解锁' : `未解锁 . 成长值需达到${level_experience}`;
			},
			propNum() {
				const {propNum} = this.equity;
				return propNum;
			},
			chanceNum() {
				const {chanceNum} = this.equity;
				return chanceNum;
			}
		},
		onLoad() {},
		async onShow() {
			uni.showLoading({
				title: '加载中'
			})
			this.isUserLogin = this.$user.isLogin()
			if (this.isUserLogin) {
				await this.getUserInfo();
				const hasEditName = uni.getStorageSync('hasEditName');
				const firstShow = uni.getStorageSync('FIRST_SHOW');
				if(this.userInfo && this.userInfo.nickname == '微信用户' && !hasEditName && !firstShow) {
					this.$refs.modal.showModal({
						title: '温馨提示',
						content: '需要更换一个更酷的用户名哦~',
						btnText: '去编辑',
						confirm: (e) => {
							uni.navigateTo({
								url: `/plugins/setting/index?isEdit=${true}`
							});
						},
						complete: (err) => {
							uni.setStorageSync('FIRST_SHOW', 1);
						}
					});
				}
			} else {
				uni.hideLoading();
			}
			this.getUserLevelInfo();
			this.getMyEquityNum();
		},
		onHide() {
			this.refreshPage = false
		},
		methods: {
			//
			upAvatarClick(){
				
			},
			changeAvatar(){
				
			},
			// 跳转到领取权益页面
			goClaimBenefit(){
				uni.navigateTo({
					url: '/plugins/member-benefits/claim-benefits/claim-benefits'
				})
			},
			lookBanlance() {
				uni.navigateTo({
					url: '/plugins/account-balance/index'
				})
			},
			async getUserInfo() {
				const {code, data} = await get_user_info();
				uni.hideLoading();
				if (code == 0) {
					this.userInfo = data;
					uni.setStorageSync('userInfo', data);
					this.userInfo.integral = parseFloat(this.userInfo.integral).toFixed(2)
				}
			},
			async getUserLevelInfo() {
				const {code} = await getLevelStatus();
				// 0-开启用户等级
				if(code == 0) {
					this.isOpenLevel = true;
					this.getUserLevel();
				} else {
					this.isOpenLevel = false;
				}
			},
			getUserLevel() {
				getUserLevel({level: this.curLevel}).then(res => {
					const {code, data = {}} = res;
					if(code == 0) {
						this.userLevelInfo = data;
					}
				}).catch(err => {
					
				});
			},
			goOrderDetail(index) {
				uni.navigateTo({
					url: '/plugins/order-detail/index?currentTab=' + index
				})
			},
			goDetail(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			goLogin() {
				uni.navigateTo({
					url: '/plugins/login/phone-number/index?type=' + 'password'
				})
			},
			// 跳转个人中心
			goPernsonCenter() {
				if(this.isOpenLevel) {
					uni.navigateTo({
						url: `/plugins/user-level/index`
					});
				}
			},
			async getMyEquityNum() {
				const {code, data} = await getMyEquity();
				if(code == 0) {
					this.equity = data;
				}
			},
			jumpPage(type) {
				// if(type === 1) {
				// 	uni.navigateTo({
				// 		url: '/plugins/free/index'
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/plugins/prop/index'
				// 	})
				// }
			}
		}
	}

</script>

<style lang="scss" scoped>
	movable-area{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 99;
		movable-view{
			pointer-events: auto;
			width: 162rpx;
			height: 156rpx;
			position: relative;
			image{
				width: 162rpx;
				height: 156rpx;
				position: absolute;
			}
		}
	}
	.container {
		width: 750rpx;
		/* #ifdef MP-WEIXIN || APP-PLUS */
		height: 100vh;
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 60px);
		/* #endif */
		padding: 0 30rpx;
		background: linear-gradient(90deg, #F2F0FF, #EDEBFF, #F3F8FF);
	}
	.body {
		overflow-y: scroll;
		padding-bottom: 30rpx;
		height: 100%;
	}

	.user-info {
		height: 98rpx;
		width: 100%;
		position: relative;
	}
	.head-img{
		display: flex;
	}
	.user-info-text {
		margin-left: 20rpx;
	}

	.nick-id {
		font-size: 24rpx !important;
	}

	.user-info-text>view:first-child {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFang SC-Medium;
		font-weight: bold;
		color: #000000;
	}

	// .user-info-text>view:last-child {
	// 	font-size: 20rpx;
	// 	font-family: Source Han Sans CN;
	// 	font-weight: 400;
	// 	color: #999999;
	// 	margin-top: 10rpx;
	// }

	.lv-img {
		width: 30px;
		height: 18px;
	}
	.grow-class {
		height: 22px;
		margin-top: 5px;
		color: #000000;
		background-color: #ffffff;
		border-radius: 18px;
		font-family: PingFang SC-Regular;
		font-size: 11px;
		/* text-align: center; */
		line-height: 18px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 2px;
		/* padding-bottom: 5px;*/
	}
	.account-price-container {
		width: 100%;
		height: 150rpx;
		margin-top: 30rpx;
	}

	.level-container {
		margin-top: 15px;
		width: 100%;
		.content-class{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			// width: 345px;
			height: 149px;
			background-size: cover;
			background-repeat: no-repeat center;
		}
		.left-area {
			width: calc(100% - 120px);
			padding-left: 30px;
			margin-bottom: 60px;
		}
		.v_text {
			font-family: BTH;
			font-size: 34px;
		}
		.v_desc{
			font-family: PingFang SC-Regular;
			font-size: 12px;
		}
		.right-area {
			width: 79px;
			height: 26px;
			margin-right: 30px;
			margin-bottom: 60px;
			line-height: 26px;
			color: #885729;
			background: linear-gradient(to bottom, #FAE4BF, #EDCB9A);
			border-radius: 26px;
			text-align: center;
			font-size: 12px;
			font-family: PingFang SC-Medium;
		}
	}

	.account-price-item {
		width: 335rpx;
		height: 150rpx;

		.balance-text{
			font-size: 24px;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
		}
		.desc-text{
			font-size: 14px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #3D3D3D;
		}
	}

	.prop-container{
		display: flex;
		justify-content: space-between;
		padding: 25px 18px 15px;
		height: 115px;
		background-size: 100% 100%;
		background-repeat: no-repeat center;
		.prop-center{
			width: calc((100% - 25px) / 2);
			// width: 160px;
			padding-left: 15px;
			height: 77px;
			display: flex;
			border: 0;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			background-size: 100% 100%;
			background-repeat: no-repeat center;
		}
		.text-center{
			font-size: 13px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.num-center{
			font-size: 20px;
			font-family: PingFang SC-Semibold, PingFang SC;
			color: #FFFFFF;
		}
	}
	.order-container {
		width: 100%;
		height: 286rpx;
		margin-top: 30rpx;
		background: #FFFFFF;
	}
	.service-container {
		width: 100%;
		min-height: 360rpx;
		margin-top: 30rpx;
		padding: 0;
		// height: 250rpx;
		background: #FFFFFF;
	}

	.my-order {
		margin-left: 30rpx;
	}

	.order-head,
	.service-head {
		// width: 100%;
		height: 100rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.service-head {
		padding: 0 30rpx;
	}

	.order-detail {
		height: 130rpx;
		width: 100%;
		// background: #FFFFFF;
		padding: 0 18rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.order-item {
		width: 25%;
	}

	.order-item,
	.service-item {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 10rpx;
	}

	.order-item-image {
		width: 74rpx;
		height: 68rpx;
	}

	.order-name {
		margin-top: 18rpx;
	}

	.service-item-image {
		width: 48rpx;
		height: 48rpx;
	}

	.img-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.service-detail {
		width: 100%;
		background: #FFFFFF;
		flex-wrap: wrap;
	}

	.service-item {
		width: 25%;
		margin-bottom: 40rpx;
	}

	.login {
		height: 100%;
		padding: 0 15px;
	}

	.image-size {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.service-name {
		margin-top: 20rpx;
	}

	.my-service {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.my-banlance {
		display: flex;
		flex-direction: column;
		padding-left: 32rpx;
		justify-content: center;
		align-items: center;
	}

	.order-icon {
		width: 74rpx;
		height: 68rpx;
	}

</style>